<template>
	<view class="zone">
		<Header title="好友"></Header>
		<view class="banner">
			<view class="tabbox">
				<view class="item" :class="[tab == 0?'active':'']" @click="tabchange(0)">
					<view class="p1">我的好友<text>({{total ? total : 0}})</text></view>
				</view>
				<view class="item" :class="[tab == 1?'active':'']" @click="tabchange(1)">
					<view class="p1">好友助力<text>({{help_num ? help_num : 0}})</text></view>
				</view>
				<view class="item" :class="[tab == 2?'active':'']" @click="tabchange(2)">
					<view class="p1">添加好友</view>
				</view>
				<view class="item" :class="[tab == 3?'active':'']" @click="tabchange(3)">
					<view class="p1">好友申请<text>({{add_num ? add_num : 0}})</text></view>
				</view>
			</view>
			<!-- <view class="tabbox">
                <block v-for="(item,index) in tablist" :key="index">
                    <view class="item" :class="[tab == item.id ? 'active':'']" @click="tabchange(item.id,index)">
                        <view class="p1">{{item.name}}
                            <text v-if="tab == 0">({{total ? total : 0}})</text>
                            <text v-if="tab == 1">({{help_num ? help_num : 0}})</text>
                            <text v-if="tab == 3">({{add_num ? add_num : 0}})</text>
                        </view>
                    </view>    
                </block>
            </view> -->
		</view>
		<view class="main">
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="imgbox" v-if="tab == 2">
					<view class="inpt">
						<input type="number" class="ipt" placeholder="请输入好友ID" v-model='invite_code' />
						<view class="copy" @click="search">搜索</view>
					</view>
				</view>
				<view class="imgbox" v-else>
					<image @click="$p.navto('/pages/index/transferTo')" src="http://image.qxgm.site/tdz/img/tk/5.png"
						mode="widthFix" class="img1" v-if="tab == 0"></image>
					<view class="title">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" class="img2"></image>
						<view class="sgabb">{{tab == 0 ? '我的好友' : tab == 1 ? '好友助力' : tab == 3 ? '好友申请' : ''}}</view>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" class="img2"></image>
					</view>
					<image @click="$p.navto('/pages/index/postman')" src="http://image.qxgm.site/tdz/img/tk/4.png"
						mode="widthFix" class="img3" v-if="tab == 0"></image>
					<view class="red" v-if="tab == 0 && mail_num != 0"></view>
				</view>
				<scroll-view scroll-y class="info" @scrolltolower="scnextrecord">
					<view class="item" v-for="(item,index) in list[tab]" :key="index">
						<view class="flex">
							<view class="header">
								<!-- <view class="dian m1"></view> -->
								<image :src='item.avatar' mode="widthFix" />
							</view>
							<view class="worf">
								<text class="phone">{{item.username}}</text>
								<text class="vode">ID:{{item.invite_code}}</text>
								<view class="time" v-if="tab != 0">{{item.create_time}}</view>
							</view>
						</view>
						<view class="msg" v-show="tab == 1">
							邀请你 <br>
							给他的<text>{{item.type}}</text>
						</view>
						<view class="linkbtn" @click="linkwold(item)" v-if="tab == 0">联系ta</view>
						<view class="btnbox" v-if="tab == 1">
							<view v-if="item.status.value == 0" style="display: flex;">
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="linkbtn" @click="helpbtn(item)">助力</u-button>
							</view>
							<view v-if="item.status.value == 1" class="msgs">
								已助力
							</view>
						</view>
						<view class="linkbtn" @click="applybtn(item)" v-if="tab == 2">添加</view>
						<view class="btnbox" v-if="tab == 3">
							<view v-if="item.status.value == 0" style="display: flex;">
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="linkbtn btn2" @click="executebtn(item,2)">拒绝</u-button>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="linkbtn" @click="executebtn(item,1)">通过</u-button>
							</view>
							<view v-if="item.status.value == 1" class="msgs">
								已通过
							</view>
							<view v-if="item.status.value == 2" class="msgs">
								已拒绝
							</view>
						</view>
					</view>
					<view class="empty" v-if="list[tab].length==0">
						<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
						暂无数据
					</view>
					<view class="more" v-else>
						{{loadText}}
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 联系ta -->
		<u-mask :show="contact">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>联系ta</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">

							<view class="spart">
								<text>微信</text>
								<view class="slink">
									<input type="text" v-model="weixin" disabled/>
									<view class="scopy" @click="$p.copy(weixin)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ</text>
								<view class="slink">
									<input type="text" v-model="qq" disabled/>
									<view class="scopy" @click="$p.copy(qq)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ群</text>
								<view class="slink">
									<input type="text" v-model="qq_group" disabled/>
									<view class="scopy" @click="$p.copy(qq_group)">
										复制
									</view>
								</view>
							</view>

						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="contact=false">确认</u-button>
					</view>
				</view>
				<image class="m_close" @click="contact = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 助力 -->
		<u-mask :show="help">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>助力</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="helpbox">
							<view class="box">
								<view class="name">
									<view class="p1">{{item.username}}</view>
									<view class="p2">ID:{{item.invite_code}}</view>
								</view>
								<view class="img">
									<image :src='item.avatar' mode="widthFix" />
								</view>
							</view>
							<view class="msg">
								您确定要给好友的<text>药园助力</text>吗？
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="yeshelp()">确认助力</u-button>
					</view>
				</view>
				<image class="m_close" @click="help = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 申请成功 -->
		<u-mask :show="apply">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>申请发送</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="helpbox">
							<view class="box">
								<view class="name">
									<view class="p1">{{item.username}}</view>
									<view class="p2">ID:{{item.invite_code}}</view>
								</view>
								<view class="img">
									<image :src='item.avatar' mode="widthFix" />
								</view>
							</view>
							<view class="msg">
								请先确定发送，再提醒好友确认吧！
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="applyfun">确认</u-button>
					</view>
				</view>
				<image class="m_close" @click="apply = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: {
					0: [],
					1: [],
					2: [],
					3: [],
				},
				tablist: [{
						id: 0,
						name: '我的好友',
						isrequest: true,
					},
					{
						id: 1,
						name: '好友助力',
						isrequest: false,
					}, {
						id: 2,
						name: '添加好友',
						isrequest: false,
					},
					{
						id: 3,
						name: '好友申请',
						isrequest: false,
					},
				],
				tab: 0,
				contact: false, //联系TA
				help: false, // 助力
				apply: false, //申请
				weixin: '暂未设置',
				qq: '暂未设置',
				qq_group: '暂未设置',
				invite_code: '',
				item: {},
				page: [1, 1, 1, 1],
				max_page: [1, 1, 1, 1],
				loadText: '没有更多了',
				open: true,
				total: '',
				helptotal: '',
				listtotal: '',
				redshow: false, //红点
				mail_num: '',
				help_num: '',
				add_num: ''
			}
		},
		onShow() {
			this.hasnewmail()
		},
		onLoad() {
			this.friends()
		},
		methods: {
			//是否有新邮件
			async hasnewmail() {
				let res = await this.$http.index.hasnewmail()
				if (res.code == 1) {
                   
					this.mail_num = res.data.mail_num
					this.add_num = res.data.add_num
					this.help_num = res.data.help_num
				}
			},
			tabchange(id) {
				this.tab = id
				if (id == 0 && this.tablist[id].isrequest == false) {
					this.friends()
				} else if (id == 1 && this.tablist[id].isrequest == false) {
					this.helplist()
				} else if (id == 3 && this.tablist[id].isrequest == false) {
					this.addlist()
				}
			},
			//好友列表
			async friends() {
				let res = await this.$http.index.friends({
					page: this.page[this.tab]
				})
				if (res.code == 1) {
                    this.total = res.data.total
					this.tablist[this.tab].isrequest = true
					if (res.data.length != 0) {
						this.list[this.tab] = [...this.list[this.tab], ...res.data.data]
						this.max_page[this.tab] = res.data.last_page
						if (this.page[this.tab] > this.max_page[this.tab] || this.page[this.tab] == this.max_page[this
								.tab]) this.loadText = '没有更多了';

					}

				} else {
					this.$u.toast(res.msg)
				}
				uni.hideLoading()
			},
			//好友助力列表
			async helplist() {
				let res = await this.$http.index.helplist({
					page: this.page[this.tab]
				})
				if (res.code == 1) {
					this.tablist[this.tab].isrequest = true
					this.list[this.tab] = [...this.list[this.tab], ...res.data.data]
					this.max_page[this.tab] = res.data.last_page
					if (this.page[this.tab] > this.max_page[this.tab] || this.page[this.tab] == this.max_page[this
						.tab]) this.loadText = '没有更多了';

				} else {
					this.$u.toast(res.msg)
				}
				uni.hideLoading()
			},

			//好友申请列表
			async addlist() {
				let res = await this.$http.index.addlist({
					page: this.page[this.tab]
				})
				if (res.code == 1) {
					this.tablist[this.tab].isrequest = true
					this.list[this.tab] = [...this.list[this.tab], ...res.data.data]
					this.max_page[this.tab] = res.data.last_page
					if (this.page[this.tab] > this.max_page[this.tab] || this.page[this.tab] == this.max_page[this
						.tab]) this.loadText = '没有更多了';

				} else {
					this.$u.toast(res.msg)
				}
				uni.hideLoading()
			},
			scnextrecord() {
				if (this.page[this.tab] >= this.max_page[this.tab]) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page[this.tab] = ++this.page[this.tab];

				if (this.tab == 0) {
					this.friends() //好有列表
				} else if (this.tab == 1) {
					this.helplist() //好友助力列表
				} else if (this.tab == 3) {
					this.addlist() //好友申请列表
				}

				setTimeout(() => {
					if (this.page[this.tab] > this.max_page[this.tab] || this.page[this.tab] == this.max_page[this
							.tab]) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},

			//搜索
			async search() {
				if (!this.invite_code) {
					this.$u.toast('请输入查找的ID')
					return
				}
				let res = await this.$http.index.search({
					invite_code: this.invite_code
				})

				if (res.code == 1) {
					this.list[this.tab] = res.data
				} else {
					this.$u.toast(res.msg)
				}

			},
			// 联系ta
			linkwold(item) {
				this.weixin = item.wechat_num ? item.wechat_num : '暂无'
				this.qq = item.qq_num ? item.qq_num : '暂无'
				this.qq_group = item.qq_group_num ? item.qq_group_num : '暂无'
				this.contact = true
			},
			//打开助力
			helpbtn(item) {
				this.item = item
				this.help = true
			},
			//确认助力
			async yeshelp() {
				let res = await this.$http.index.helpfriend({
					msg_id: this.item.id,
					status: '1'
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.page[this.tab] = 1
					this.list[this.tab] = []
					this.helplist()
					this.help = false
				}
			},
			//申请框
			applybtn(item) {
				this.item = item
				this.apply = true
			},
			//确定添加好友
			async applyfun() {
				let res = await this.$http.index.addfriends({
					invite_code: this.item.invite_code
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.apply = false
				}
			},
			//处理好友请求
			async executebtn(item, num) {
				this.item = item
				let res = await this.$http.index.execute({
					msg_id: this.item.id,
					status: num
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.page[this.tab] = 1
					this.list[this.tab] = []
					this.addlist()
				}
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background-image: url(http://image.qxgm.site/tdz/img/tk/1.png), url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-repeat: no-repeat, no-repeat;
		background-size: 100% auto, 100% 100%;
		padding-top: 38%;
		box-sizing: border-box;
	}

	.banner {
		position: relative;

		.tabbox {
			background: url(http://image.qxgm.site/tdz/img/tk/6.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 100%;
			padding: 5px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 0;

			.item {
				width: 24%;
				text-align: center;
				background: url(http://image.qxgm.site/tdz/img/tk/3.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 8px 2px;
				box-sizing: border-box;

				.p1 {
					color: #FFFED0;
					font-size: 12px;
				}

				.p2 {
					color: #FFFED0;
					font-size: 10px;
				}
			}

			.topnum {
				padding-top: 10px;
			}

			.active {
				background: url(http://image.qxgm.site/tdz/img/tk/2.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.p1 {
					color: #A97D45;
				}

				.p2 {
					color: #A97D45;
				}
			}
		}
	}

	.main {
		width: 100%;
		position: relative;

		.ping1 {
			width: 100%;
			display: flex;
		}

		.imgbox {
			display: flex;
			justify-content: space-around;
			position: relative;
			margin-bottom: 5px;

			.red {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: red;
				position: absolute;
				right: 5%;
				z-index: 9;
				top: 5px;
			}

			.img1 {
				width: 15%;

			}

			.img3 {
				width: 15%;

			}

			.title {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16px;
				background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
				background-size: 100% 100%;
				padding: 10px 0 8px;

				.img2 {
					width: 18%;
				}

				.sgabb {
					font-size: 18px;
					font-weight: normal;
					color: #50463E;
					line-height: 20px;
					margin: 0 13px;

					text {
						color: #CC6600;
						margin-left: 4px;
					}
				}
			}
		}

		.box {

			.info {
				padding: 5px 5px 10px;
				box-sizing: border-box;
				height: calc(100vh - 290px);
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: url(http://image.qxgm.site/tdz/img/ceo/mg-04.png) no-repeat;
				background-size: 100% 100%;
				padding: 9px 5px;
				box-sizing: border-box;
				margin: 3px;

				.flex {
					width: 50%;
					display: flex;

					.header {
						width: 45px;
						margin-left: 6px;
						margin-right: 6px;
						position: relative;

						.dian {
							position: absolute;
							width: 10px;
							height: 10px;
							border-radius: 50%;
							right: 2px;
							bottom: 5px;
							z-index: 9;
							border: 1px solid #ffffff;
						}

						.m1 {
							background: #6CCB72;
						}

						.m2 {
							background: #F4A456;
						}

						image {
							width: 100%;
							border-radius: 50%;
						}
					}

					.worf {
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: 13px;

						.phone {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.time {
							font-size: 12px;
						}
					}
				}

				.msg {
					width: 25%;
					font-size: 12px;

					text {
						color: #FF0099;
					}
				}

				.linkbtn {
					width: 60px;
					height: 33px;
					font-size: 14px;
					font-weight: normal;
					line-height: 33px;
					color: #fdf2c5;
					text-align: center;
					text-shadow: 0 1px 1px #CB6500;
					background: url(http://image.qxgm.site/tdz/img/public/btn7.png) no-repeat;
					background-size: 100% 100%;
				}

				.btnbox {
					display: flex;

					.btn2 {
						background: url(http://image.qxgm.site/tdz/img/public/lan.png) no-repeat;
						background-size: 100% 100%;
					}

					.msgs {
						color: #8f8f8f;
						margin-right: 20px;
						font-size: 14px;
					}
				}
			}
		}
	}

	// 联系他
	.jihuop {
		padding: 0 9%;
	}

	.spart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;

		text {
			width: 22%;
		}
	}

	.slink {
		width: 78%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		padding: 0 6px 0 19px;
		height: 40px;

		input {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 24px;
		}

		.scopy {
			width: 49px;
			height: 28px;
			display: block;
			font-size: 12px;
			text-align: center;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 28px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.inpt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		border-radius: 1px;
		margin: 10px 0 10px 0;
		padding: 1px 4px 1px 18px;
		box-sizing: border-box;
		width: 90%;
		border-radius: 3px;
	}

	.copy {
		width: 75px;
		height: 33px;
		font-size: 14px;
		font-weight: normal;
		line-height: 33px;
		color: #fefbca;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	//助力
	.helpbox {
		.box {
			height: 70px;
			background: #c7c5c3;
			width: 80%;
			margin: auto;
			padding: 15px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				.p1 {
					font-size: 16px;
				}
			}

			.img {
				width: 45px;
				margin-left: 6px;
				margin-right: 6px;

				image {
					width: 100%;
					border-radius: 50%;
				}
			}
		}

		.msg {
			color: #000000;
			margin: 10px auto 25px;
			text-align: center;
			font-size: 16px;

			text {
				color: #FF0099;
			}
		}

		.num {
			text-align: center;
			font-size: 14px;
		}
	}
</style>